<!-- 奖池奖品 -->
<template>
	<view>
		<view class="main">
			<view class="no_info" v-if="list.length == 0" style="height: auto;">
				<image src="@/static/null_img.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
			<view class="main_view" v-for="(item,index) in list" :key="index">
				<view class="status_box ellipseHide">{{item.prizeName}}</view>
				<view class="main_box">
					<image class="main_box_l" :src="item.img" mode="aspectFill"></image>
					<view class="main_box_r">
						<view class="box_r_t">
							<view class="box_r_t_l ellipseHide_two">{{item.name}}</view>
							<view class="box_r_t_r">{{item.amount}}名</view>
						</view>
						<view class="box_r_b">
							价值{{item.worth}}元（{{item.validity}}）
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="zw"></view>
		<view class="button_box">
			<view class="button" @click="jumpBlindbox">继续开盲盒</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxActivityId: '', //活动id
				list: [],
				pageNumber: 1, //当前页数
				pageSize: 10, //分页大小
				listTotal: 0, //列表总数
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			jumpBlindbox(){
				window.location.href =  "/pages/pay/blindbox"
			},
			async getList() { //获取列表
				uni.showLoading()
				let data = {
					boxActivityId: this.boxActivityId,
					pageNum:this.pageNumber,
					pageSize:this.pageSize,
				}
				const res = await this.$api.homeJackpotPrizeList(data);
				this.listTotal = res.result.total
				if (this.pageNumber > 1) {
					this.list = this.list.concat(res.result.records); //将数据拼接在一起
				} else {
					this.list = res.result.records
				}
				uni.hideLoading()
			}
		},
		//页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNumber, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNumber >= Math.ceil(this.listTotal / this.pageSize)) {
				console.log('没有分页')
				// this.lodingtype = 1
			} else {
				// this.lodingtype = 0
				this.pageNumber++; //每触底一次 page + 1;
				this.getList();
			}
		},
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
	.main{
		padding: 30rpx;
	}
	.main_view{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0rpx 28rpx 0rpx 24rpx;
		margin-bottom: 24rpx;
		position: relative;
	}
	.status_box{
		position: absolute;
		min-width: 118rpx;
		max-width: 140rpx;
		padding: 0 14rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
		box-shadow: inset 0rpx -2rpx 0rpx #DCB66B;
		border-radius: 20rpx 0rpx 24rpx;
		top: 0;
		left: 0;
		z-index: 2;
		font-size: 24rpx;
		color: #824806;
		text-align: center;
		line-height: 40rpx;
		
	}
	.main_box{
		display: flex;
		border-bottom: 2rpx solid #E1E1E1;
		padding: 24rpx 0;
	}
	.main_box:last-child{
		border-bottom: 0;
	}
	.main_box_l{
		width: 104rpx;
		height: 104rpx;
		margin-right: 28rpx;
		border-radius: 12rpx;
	}
	.main_box_r{
		flex: 1;
	}
	.box_r_t{
		display: flex;
		justify-content: space-between;
	}
	.box_r_t_l{
		width: 390rpx;
		font-size: 30rpx;
		color: #222222;
		line-height: 42rpx;
		font-weight: bold;
	}
	.box_r_t_r{
		font-size: 30rpx;
		color: #FF2121;
		font-weight: bold;
	}
	.box_r_b{
		font-size: 24rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	.button_box{
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0rpx;
		background-color: #F6F6F6;
		z-index: 2;
		height: 200rpx;
		padding-top: 40rpx;
	}
	.button_box .button{
		width: 390rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #FF9A3D 3.08%, #FD5D04 100%);
		box-shadow: 0rpx 8rpx 10rpx rgba(255, 96, 11, 0.2);
		border-radius: 152px;
	}
	.zw{
		width: 100%;
		height: 240rpx;
	}
</style>
